<!doctype html>
<html>
<head>
<script src="../src/cge.js"></script>
<script src="../src/fps.js"></script>
<script src="../src/canvas.js"></script>
<script src="../src/image.js"></script>
<script src="../src/gradient.js"></script>
<script src="../src/key.js"></script>
<script src="../src/shape.js"></script>

<script>
function init ()
{
	function _wait ( cback )
	{
		if ( CGE.ready () ) 
			cback ();
		else
			setTimeout ( function () { _wait ( cback ); }, 500 );
	}

	var b = CGE.shape_handler.add ( "resources/ball.png", "ball", 10, 10 );
	b.save_background = false;

	CGE.canvas_handler.add ( "screen", 400, 350 );

	_wait ( app_start );
}

function app_start ()
{
	console.debug ( "APP START" );

	var c = CGE.canvas_handler.get ( "screen" );
	
	c.render ( "dest_canvas" );
	c.color_clear = "#ffffff";

	var gr = CGE.gradient_handler.add ( "v", "background", 600 );

	gr.add ( 0, "#000044" );
	gr.add ( 1, "#3333cc" );

	CGE.keys.add ( CGE.KEY_CURSOR_LEFT, function ( evt ) { _x_delta = -3; }, function ( evt ) { _x_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_RIGHT, function ( evt ) { _x_delta = 3; }, function ( evt ) { _x_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_UP, function ( evt ) { _y_delta = -3; }, function ( evt ) { _y_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_DOWN, function ( evt ) { _y_delta = 3; }, function ( evt ) { _y_delta = 0; } );
	CGE.keys.listen ( true );

	CGE.render ( render, 50 );

	gr.blit ( 0,0, 800, 600 );
}

var _x_delta = 0, _y_delta = 0;
var x = 0, y = 0;
function render ()
{
	// var g = CGE.gradient_handler.get ( "background" );
	var b = CGE.shape_handler.get ( "ball" );

	// g.blit ( 0,0, 800, 600 );
	b.unblit ();
	b.blit ( x, y );

	x += _x_delta;
	y += _y_delta;

}
</script>
</head>
<body onload="init()">

<div id="dest_canvas" style="border: 2px dotted black; padding: 8px; float: left;"></div>


</body>
</html>
